<template>
  <div class="Topnav">
    <div  class="Topnav-item copy-btn" data-clipboard-text="http://101.34.0.144/#/">
      <i class="iconfont">&#xe60f;</i>
      分享本站
    </div>

    <div class="Topnav-item mapfather" @mouseleave="mapshow=false">
      <div  class="son" @mouseenter="showmap()">
        <i class="iconfont">&#xe634;</i>  网站地图
      </div>
      <Transition>
      <div class="map" v-if="mapshow===true">
        <!-- 吧台 -->
        <RouterLink to="/" class="mapitem" :class="{act:$route.path==='/'}">
          <i class="iconfont">&#xe624;</i> 吧台选词
        </RouterLink>
        <!-- 我的 -->
        <RouterLink to="/my"  class="mapitem" :class="{act:$route.path==='/my'}">
          <i class="iconfont">&#xe8a0;</i>  我的词吧
        </RouterLink>
        <!-- 公社 -->
        <RouterLink to="/square"  class="mapitem" :class="{act:$route.path==='/square'}">
          <i class="iconfont">&#xe619;</i>  词吧公社
        </RouterLink>
        <!-- 翻译 -->
        <RouterLink to="/translation"  class="mapitem" :class="{act:$route.path==='/translation'}">
          <i class="iconfont">&#xe65c;</i>  小译小译
        </RouterLink>
      </div>
      </Transition>
    </div>

    <template v-if="profile.token">
      <div class="Topnav-item">
      <!-- 用户自定义了头像 -->
      <Avatar v-if="profile.avatar" :url="profile.avatar" size="30"/>
      <!-- 用户没有自定义头像 -->
      <Avatar v-else  size="30"/>
      <!-- 欢迎语 -->
      <span class="welcome">你好，{{profile.username}}</span>
      <RouterLink to="/user/profile" class="son">
        <i class="iconfont">&#xe7c6;</i>个人中心
      </RouterLink>

      <div class="son" @click="logout">
        <i class="iconfont">&#xe620;</i> 退出登录
      </div>
      </div>
    </template>

    <template v-else>
      <RouterLink to="/login" class="Topnav-item" style="margin-right:20px">
        <i class="iconfont">&#xe7b2;</i>登录/注册
      </RouterLink>
    </template>

  </div>

  <!-- 添加v-show动画 -->
  <transition
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUpBig"
  >
  <div class="Topnav2" v-show="y>=40">

  <!-- 一键返回顶部按钮 -->
  <div class="turnback" @click="scrollToTop">
    <i class="iconfont">&#xe6c6;</i>
  </div>
  <template v-if="profile.token">
    <div class="Topnav-item">
    <!-- 用户自定义了头像 -->
    <Avatar v-if="profile.avatar" :url="profile.avatar" size="30"/>
    <!-- 用户没有自定义头像 -->
    <Avatar v-else  size="30"/>
    <!-- 欢迎语 -->
    <span class="welcome">你好，{{profile.username}}</span>
    <RouterLink to="/user/profile" class="son">
      <i class="iconfont">&#xe7c6;</i>个人中心
    </RouterLink>

    <div class="son" @click="logout">
      <i class="iconfont">&#xe620;</i> 退出登录
    </div>
    </div>
  </template>

  <template v-else>
    <RouterLink to="/login" style="margin-right:20px" class="Topnav-item">
      <i class="iconfont">&#xe7b2;</i>登录/注册
    </RouterLink>
  </template>
    </div>
  </transition>

</template>
<script>
// 引入vueuse包来实现顶部栏固定
import { useWindowScroll } from '@vueuse/core'
import Avatar from '@/components/library/avatar.vue'
// 导入第三方包实现一键复制
import Clipboard from 'clipboard'
// 导入封装的消息提示框
import popmessage from '@/components/library/message'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'topnav-vue',
  data () {
    return {
      mapshow: false
    }
  },
  methods: {
    showmap () {
      // console.log('test')
      this.mapshow = true
    }
  },
  components: {
    Avatar
  },
  mounted () {
    // 初始化Clipboard对象
    this.clipboard = new Clipboard('.copy-btn')

    // 添加点击事件监听器
    this.clipboard.on('success', () => {
    // 复制成功的处理逻辑
      popmessage({ type: 'success', str: '已复制本网站地址，快去分享给你的小伙伴吧！' })
    })

    this.clipboard.on('error', () => {
    // 复制失败的处理逻辑
      popmessage({ type: 'error', str: '复制失败' })
    })
  },
  setup () {
    const { y } = useWindowScroll()
    const store = useStore()
    const router = useRouter()
    const profile = computed(() => {
      return store.state.user.profile
    })
    const logout = () => {
      store.commit('user/setUser', {})
      popmessage({ type: 'warn', str: '已退出登录请重新登录' })
      router.push('/login')
    }
    const scrollToTop = () => {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    // console.log(y)
    // console.log(route.path)
    return { profile, logout, y, scrollToTop }
  }
}
</script>
<style scoped lang="less">
.Topnav{
  padding-right: 10%;
  height: 40px;
  width: 100%;
  background-color:#fff;
  .map{
    z-index: 3;
    position: absolute;
    top: 30px;
    background-color:#fff;
    height: auto;
    width: 100px;
    .mapitem {
      display: block;
      padding-left: 10px;
      margin-top: 3px;
      border-radius: 10px;
      background-color: #ffffff;
      width: 100px;
      height: 30px;
      animation: birth 0.5s ease-in-out;

      &:hover {
        transform: scale(1.05);
        background-color: #e4e4e4;
        color: black;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
      }
    }

    @keyframes birth {
      from {
        transform: scale(0.5);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .act{
      background-color: #3e87e5;
      color: white;
    }
  }
  .Topnav-item{
    cursor: pointer;
    display: flex;
    font-family:'钉钉进步体' ;
    font-size: 15px;
    line-height: 30px;
    float: right;
    .welcome{
      margin-left: 10px;
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .son{
      cursor: pointer;
      margin-right: 20px;
      &:hover{
        color: #3e87e5;
      }
    }
    i {
      font-size: 15px;
    }
  }
  .mapfather{
    display: flex;
    flex-direction: column;
  }
}

.Topnav2 /deep/{
  z-index: 999999;
  height: 40px;
  width: 100%;
  background-color:#fff;
  position: fixed;
  top: 0;
  .turnback {
    cursor: pointer;
    float: left;
    margin-left: 200px;
    transition: all 300ms linear;

    .iconfont {
      font-size: 24px;
    }

    background-color: #3e87e5;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #fff;
      color: #3e87e5;
      width: 60px;
      height: 60px;
      transform: translateY(-10%);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: all 300ms linear;
    }
  }

  .Topnav-item{
    display: flex;
    font-family:'钉钉进步体' ;
    margin-right: 30px;
    font-size: 15px;
    line-height: 30px;
    float: right;
    .welcome{
      margin-left: 10px;
      width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .son{
      cursor: pointer;
      margin-right: 10px;
      &:hover{
        color: #3e87e5;
      }
    }
    i {
      font-size: 15px;
    }
  }
}

//为v-show添加动画

</style>
